<template>
  <div class="box">
    <el-col :span="12">
      <el-menu
        router
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        text-color="blue"
        active-text-color="#ffd04b"
        :collapse="collapse"
      >
        <el-submenu index="1" class="rank_1">
          <template slot="title" class="rank_1_template">
            <i class="el-icon-connection"></i>
            <span>小米优品</span>
          </template>
          <el-submenu
            
            :index="'/layout'+item.path"
            v-for="item in oListMenus1.children"
            :key="item.menuid"
          >
            <template slot="title">
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item
              :index="'/layout'+item2.path"
              v-for="item2 in item.children"
              :key="item2.menuid"
              ><span>
                {{ item2.name }}
              </span></el-menu-item
            >
          </el-submenu>
        </el-submenu>
      </el-menu>
    </el-col>
  </div>
</template>

<script>
import { formatMenus } from "@/Utils/formatData.js";
export default {
  props: ["collapse"],
  created() {
    const oMenus = JSON.parse(localStorage.getItem("data")).manu;
    this.oListMenus = formatMenus(oMenus);
    this.oListMenus1 = this.oListMenus[0];
  },
  props: ["collapse"],
  data() {
    return {
      oListMenus: [],
      oListMenus1: [],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
  },
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.box {
  width: 100%;
  height: 100%;
  font-size: 20px;
  .el-col {
    width: 100%;
    height: 100%;
    .el-menu {
      width: 100%;
      height: 100%;
      font-size: 20px;
    }
  }
}
.el-aside {
  opacity: 0.8;
  box-shadow: 5px 5px 10px 5px #ccc;
}
</style>
